<template>
  <div class="left_map">
    <div class="mapContent">
      <div class="mapBox">
<!--        <ul class="mark">-->
<!--          <li class="item">-->
<!--            <div class="blackType one1">认证节点</div>-->
<!--          </li>-->

<!--          <li class="item">-->
<!--            <div class="blackType three1">记账节点</div>-->
<!--          </li>-->

<!--          <li class="item">-->
<!--            <div class="blackType two1">共识节点</div>-->
<!--          </li>-->
<!--        </ul>-->

        <ul class="mark2">
          <li class="item">
            <div class="suqareType one1">10-20</div>
          </li>

          <li class="item">
            <div class="suqareType two1">5-9</div>
          </li>

          <li class="item">
            <div class="suqareType three1">1-4</div>
          </li>

          <li class="item">
            <div class="suqareType four1">0</div>
          </li>
        </ul>

        <!--节点1-->
<!--        <div class="blackGps" :class="`blackGps${key+1}`"  :id="`blackGps${key+1}`" v-for="(item, key) in list" :key="key">-->

<!--          <div class="gpsAddress" @mouseover="showModal(item)" @mouseleave="hideModal(item)">-->
<!--            <current-map class="cursorPointer" :type=item.color />-->
<!--          </div>-->

<!--        </div>-->

<!--        <div class="modalBox" :class="[`modalBox${keys+1}`, {'active':item.active || (keys +1) === childrenIndex}]"  v-for="(item, keys) in list">-->
<!--          <h1>{{item.name || ''}}</h1>-->
<!--          <div>节点类型：{{item.type || ''}}</div>-->
<!--          <div>所在区域：{{item.address || ''}}</div>-->
<!--        </div>-->

        <div class="mapbg">
          <div class="lineChart" ref="lineChart" id="lineChartId"></div>
        </div>

        <div id="rolling">
          <ul class="black_info">
            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/icbc.png" alt="节点">
              <span>工商银行区块链记账节点</span>
            </li>
            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/icbc.png" alt="节点">
              <span>工商银行区块链共识节点</span>
            </li>

            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/ny_bank.png" alt="节点">
              <span>农业银行记账节点</span>
            </li>
            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/ny_bank.png" alt="节点">
              <span>农业银行共识节点</span>
            </li>

            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/ms_bank.png" alt="节点">
              <span>民生银行区块链记账节点</span>
            </li>
            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/ms_bank.png" alt="节点">
              <span>民生银行区块链共识节点</span>
            </li>

            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/cd_bank.png" alt="节点">
              <span>成都银行区块链记账节点</span>
            </li>
            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/cd_bank.png" alt="节点">
              <span>成都银行区块链共识节点</span>
            </li>

            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/ns_bank.png" alt="节点">
              <span>农商银行区块链记账节点</span>
            </li>
            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/ns_bank.png" alt="节点">
              <span>农商银行区块链共识节点</span>
            </li>

            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/center.png" alt="节点">
              <span>知识产权交易中心记账节点</span>
            </li>
            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/center.png" alt="节点">
              <span>知识产权交易中心共识节点</span>
            </li>


            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/qiye.png" alt="节点">
              <span>知易融区块链认证节点</span>
            </li>
            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/qiye.png" alt="节点">
              <span>知易融区块链记账节点</span>
            </li>
            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/qiye.png" alt="节点">
              <span>知易融区块链共识节点</span>
            </li>

            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/yy.png" alt="节点">
              <span>优易大数据记账节点</span>
            </li>
            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/yy.png" alt="节点">
              <span>优易大数据共识节点</span>
            </li>

            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/fw.png" alt="节点">
              <span>知识产权服务中心记账节点</span>
            </li>
            <li class="node">
              <img width="24px" height="24px" src="../../assets/img/bigScreenNew/map/fw.png" alt="节点">
              <span>知识产权服务中心共识节点</span>
            </li>
          </ul>

          <ul class="black_info_copy black_info"></ul>
        </div>

        <h1 class="area one1">双流县</h1>
        <h1 class="area two1">温江区</h1>
        <h1 class="area three1">成都市区</h1>
        <h1 class="area four1">郫都区</h1>
        <h1 class="area five1">新都区</h1>
        <h1 class="area six1">天府新区</h1>
      </div>
    </div>
  </div>
</template>

<script>
  import CurrentMap from './currentMap'
  import echarts from 'echarts';

  export default {
    name: "index",
    data() {
      return {
        showLineChart: true,
        current: -1,
        list: [
          {
            name: '工商银行',
            type: '记账节点',
            address: '四川省成都市双流区湖畔路西段天府金融科技中心',
            color: 2
          },
          {
            name: '知易融',
            type: '记账节点',
            address: '四川省成都市双流区湖畔路西段天府金融科技中心',
            color: 2
          },
          {
            name: '知易融',
            type: '认证节点',
            address: '四川省成都市双流区湖畔路西段天府金融科技中心',
            color: 1
          },
          {
            name: '成都农商银行',
            type: '记账节点',
            address: '成都市青羊区二环路西二段39号附6号，信合大厦',
            color: 2
          },
          {
            name: '成都银行',
            type: '记账节点',
            address: '西御街16号成都银行大厦',
            color: 2
          },
          {
            name: '民生银行',
            type: '记账节点',
            address: '天府大道966号金融城6号楼A103',
            color: 2
          },
          {
            name: '知易融',
            type: '共识节点',
            address: '四川省成都市双流区湖畔路西段天府金融科技中心',
            color: 3
          },
          {
            name: '农业银行',
            type: '记账节点',
            address: '成都市青羊区体育场路6号404室',
            color: 2
          },


          {
            name: '工商银行',
            type: '共识节点',
            address: '四川省成都市双流区湖畔路西段天府金融科技中心',
            color: 3
          },

          {
            name: '成都农商银行',
            type: '共识节点',
            address: '成都市青羊区二环路西二段39号附6号，信合大厦',
            color: 3
          },
          {
            name: '成都银行',
            type: '共识节点',
            address: '西御街16号成都银行大厦',
            color: 3
          },
          {
            name: '农业银行',
            type: '共识节点',
            address: '成都市青羊区体育场路6号404室',
            color: 3
          },

          {
            name: '民生银行',
            type: '共识节点',
            address: '天府大道966号金融城6号楼A103',
            color: 3
          },
          {
            name: '知识产权交易中心',
            type: '记账节点',
            address: '天府四街300号财智中心2栋B座2层',
            color: 2
          },

          {
            name: '知识产权交易中心',
            type: '共识节点',
            address: '天府四街300号财智中心2栋B座2层',
            color: 3
          },
          {
            name: '优易大数据',
            type: '记账节点',
            address: '四川省成都市郫县静园东路28号',
            color: 2
          },
          {
            name: '知识产权服务中心',
            type: '记账节点',
            address: '四川省成都市菁蓉国际广场7号楼5层',
            color: 2
          },
          {
            name: '优易大数据',
            type: '共识节点',
            address: '四川省成都市郫县静园东路28号',
            color: 3
          },
          {
            name: '知识产权服务中心',
            type: '共识节点',
            address: '四川省成都市菁蓉国际广场7号楼5层',
            color: 3
          },
        ],
        childrenIndex: -1,
        timer: null,
        modelTimer: null
      }
    },
    mounted() {
      var speed= 50
      // 向上滚动
      const box = document.getElementById('rolling')
      const one = document.querySelectorAll('.black_info')[0]
      const two = document.querySelectorAll('.black_info_copy')[0]
      two.innerHTML = one.innerHTML
      function Marquee(){
        if(box.scrollTop>=one.offsetHeight){
          box.scrollTop=0;
        }
        else{
          box.scrollTop=box.scrollTop+1;
        }
      }
      var MyMar = setInterval(Marquee,speed)
      box.onmouseover = function(){clearInterval(MyMar)}
      box.onmouseout = function(){MyMar=setInterval(Marquee,speed)}

      // let d = document.querySelectorAll('div.modalBox')
      let n = [4, 11, 5, 12, 8, 13, 6, 14, 15, 9, 2, 1, 3, 7];// 10 16 17 18 19节点不需要自动弹框
      let childIndex = 0;

      // this.modelTimer = setInterval(() => {
      //   if (childIndex === n.length) {
      //     childIndex = 0
      //   }
      //   this.childrenIndex = n[childIndex]
      //   childIndex++
      // }, 3000)

      this.setLineChart()

      //
      // let that = this
      // this.timer = setInterval(() => {
      //   that.showLineChart = !that.showLineChart
      //   document.getElementById('lineChartId').style.display = that.showLineChart ? 'block' : 'none'
      //   document.getElementById('blackGps10').style.display = that.showLineChart ? 'none' : 'block'
      //   document.getElementById('blackGps16').style.display = that.showLineChart ? 'none' : 'block'
      //   document.getElementById('blackGps17').style.display = that.showLineChart ? 'none' : 'block'
      //   document.getElementById('blackGps18').style.display = that.showLineChart ? 'none' : 'block'
      //   document.getElementById('blackGps19').style.display = that.showLineChart ? 'none' : 'block'
      // }, 10000)
    },
    methods: {
      showModal(item) {
        var _this=this;
        this.$nextTick(function () {
          this.list.forEach(function (item) {
            _this.$set(item,'active',false);
          });
          this.$set(item,'active',true);
        });
      },
      hideModal(item) {
        this.$set(item,'active',false);
      },
      async setLineChart() {
        var nodes = [
          {
            x: '30',
            y: '54',
            name: '农业银行',
            img: 'https://i.loli.net/2020/10/21/h3obzwdcrXaAnkL.png' //'https://i.loli.net/2019/12/23/l2TSqI1WztfQ5xA.png',
          },
          {
            x: '26',
            y: '30',
            name: '企业',
            img: 'https://i.loli.net/2019/12/21/J3Q6xHvRlIni9uL.png'
          },
          {
            x: '34',
            y: '25',
            name: '知识产权服务中心',
            img: 'https://i.loli.net/2019/12/21/lIVxzpC5hAZFEsb.png'
          },
          {
            x: '22',
            y: '80',
            name: '优易',
            img: 'https://i.loli.net/2019/12/21/1zON7UecdFVwDHj.png'
          },
          // {
          //     x: '38',
          //     y: '19',
          //     name: '简阳',
          //     img: 'https://i.loli.net/2019/12/21/J3Q6xHvRlIni9uL.png',
          // },
          {
            x: '36',
            y: '49',
            name: '中金浩评估机构',
            img: 'https://i.loli.net/2019/12/21/qZkOLyAj5CgJ9HG.png'
          },
          // {
          //     x: '37',
          //     y: '60',
          //     name: '新都',
          //     img: 'https://i.loli.net/2019/12/21/J3Q6xHvRlIni9uL.png'
          // },
          // {
          //     x: '27',
          //     y: '75',
          //     name: '企业2',
          //     img: 'https://i.loli.net/2019/12/21/J3Q6xHvRlIni9uL.png'
          // },
          {
            x: '60',
            y: '80',
            name: '',
          }, // 占位
        ]

        var links = [
          {
            source: '企业',
            target: '农业银行',
            name: '知识产权融资'
          },
          {
            source: '农业银行',
            target: '优易',
            name: '知识产权确权验证'
          },
          {
            source: '农业银行',
            target: '中金浩评估机构',
            name: '知识产权价值验证'
          },
          {
            source: '企业',
            target: '知识产权服务中心',
            name: '知识产权质押登记'
          },
          {
            source: '优易',
            target: '知识产权服务中心',
            name: ''
          },
          {
            source: '优易',
            target: '中金浩评估机构',
            name: ''
          },
          // {
          //     source: '优易',
          //     target: '企业2',
          //     name: ''
          // },
          // {
          //     source: '企业2',
          //     target: '农业银行',
          //     name: ''
          // },
          {
            source: '农业银行',
            target: '中金浩评估机构',
            name: ''
          },
          // {
          //     source: '企业2',
          //     target: '知识产权服务中心',
          //     name: ''
          // },
          // {
          //     source: '企业2',
          //     target: '中金浩评估机构',
          //     name: ''
          // },
          {
            source: '知识产权服务中心',
            target: '中金浩评估机构',
            name: ''
          },
        ]
        var charts = {
          nodes: [],
          links: [],
          linesData: []
        }
        var dataMap = new Map()
        for (var j = 0; j < nodes.length; j++) {
          var x = parseInt(nodes[j].x)
          var y = parseInt(nodes[j].y)
          var node = {
            name: nodes[j].name,
            value: [x, y],
            symbolSize: 40,
            alarm: nodes[j].alarm,
            symbol: 'image://' + nodes[j].img,
            itemStyle: {
              normal: {
                color: '#30d7e1',
              }
            }
          }
          dataMap.set(nodes[j].name, [x, y])
          charts.nodes.push(node)
        }
        for (var i = 0; i < links.length; i++) {
          var link = {
            source: links[i].source,
            target: links[i].target,
            label: {
              normal: {
                show: true,
                formatter: links[i].name
              }
            },
            lineStyle: {
              normal: {
                color: '#30d7e1'
              }
            }
          }
          charts.links.push(link)
          // 组装动态移动的效果数据
          var lines = [{
            coord: dataMap.get(links[i].source)
          }, {
            coord: dataMap.get(links[i].target)
          }]
          charts.linesData.push(lines)
        }
        let option = {
          xAxis: {
            show: false,
            type: 'value'
          },
          yAxis: {
            show: false,
            type: 'value'
          },
          series: [{
            type: 'graph',
            layout: 'none',
            coordinateSystem: 'cartesian2d',
            symbolSize: 40,
            label: {
              normal: {
                show: true,
                position: 'bottom',
                color: '#fff',
                fontSize: 10
              }
            },
            lineStyle: {
              normal: {
                width: 1,
                shadowColor: 'none'
              }
            },
            edgeSymbolSize: 8,
            data: charts.nodes,
            links: charts.links,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  formatter: function(item) {
                    return item.data.name
                  }
                }
              }
            }
          }, {
            name: 'A',
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            effect: {
              show: true,
              trailLength: 0,
              symbol: 'arrow',
              color: '#00FFFF',
              symbolSize: 8
            },
            data: charts.linesData
          }]
        };

        const earls = await echarts.init(this.$refs.lineChart);
        earls.setOption(option);
      }
    },
    components: {
      CurrentMap
    },
    beforeDestroy() {
      this.timer && clearInterval(this.timer)
      this.modelTimer && clearInterval(this.modelTimer)
    }
  }
</script>

<style lang="scss" scoped>
  .left_map {
    .mapContent {
      .mapBox {
        position: relative;
        .mark {
          position: absolute;
          bottom: 14px;
          left: 39px;
          .item {
            .blackType {
              display: flex;
              align-items: center;
              margin-bottom: 10px;
              font-size: 13px;
              color: #ffffff;
              &:before {
                content: "";
                display: inline-block;
                width: 24px;
                height: 20px;
                margin-right: 8px;
              }
            }

            .blackType.one1:before {
              background: url("../../assets/img/bigScreenNew/map/min_type1.png");
            }
            .blackType.two1:before {
              background: url("../../assets/img/bigScreenNew/map/min_type3.png");
            }
            .blackType.three1:before {
              background: url("../../assets/img/bigScreenNew/map/min_type2.png");
            }
          }
        }
        .mark2 {
          position: absolute;
          bottom: 15px;
          left: 55px;
          .item {
            .suqareType {
              display: flex;
              align-items: center;
              margin-bottom: 6px;
              font-size: 14px;
              color: #94e0fc;
              &:before {
                content: "";
                display: inline-block;
                width: 10px;
                height: 10px;
                margin-right: 10px;
                border-radius: 2px;
              }
            }

            .suqareType.one1:before {
              background: rgb(129, 28, 150);
            }
            .suqareType.two1:before {
              background: rgb(83, 0, 193);
            }
            .suqareType.three1:before {
              background: rgb(37, 26, 163);
            }
            .suqareType.four1:before {
              background: rgb(11, 37, 75);
            }
          }
        }
        .currentBox {
          position: absolute;
          right: 130px;
          bottom: 80px;
        }
        .mapbg {
          background: url("../../assets/img/bigScreenNew/map/map_bg_logo.png");
          width: 840px;
          height: 402px;
          .lineChart {
            position: absolute;
            z-index: 88;
            width: 100%;
            height: 100%;
          }
        }
        .modalBox {
          z-index: 99;
          box-sizing: border-box;
          display: none;
          position: absolute;
          width: 329px;
          height: 208px;
          color: #ffffff;
          font-size: 14px;
          padding: 12px 28px;
          background: url("../../assets/img/bigScreenNew/map/modal_info.png") no-repeat;
          &.modalBox1 {
            left: 270px;
            bottom: 203px;
          }
          &.modalBox2 {
            left: 272px;
            bottom: 215px;
          }
          &.modalBox3 {
            left: 280px;
            bottom: 200px;
          }
          &.modalBox4 {
            left: 212px;
            top: 72px;
          }
          &.modalBox5 {
            left: 244px;
            top: 69px;
          }
          &.modalBox6 {
            left: 254px;
            top: 106px;
          }
          &.modalBox7 {
            left: 280px;
            bottom: 193px;
          }
          &.modalBox8 {
            left: 260px;
            top: 69px;
          }
          &.modalBox9 {
            left: 258px;
            bottom: 205px;
          }
          &.modalBox10 {
            left: 205px;
            top: 70px;
          }
          &.modalBox11 {
            left: 235px;
            top: 71px;
          }
          &.modalBox12 {
            left: 258px;
            top: 62px;
          }
          &.modalBox13 {
            left: 247px;
            top: 102px;
          }

          &.modalBox14 {
            left: 253px;
            top: 128px;
          }

          &.modalBox15 {
            left: 247px;
            top: 129px;
          }

          &.modalBox16 {
            left: 71px;
            top: -100px;
          }

          &.modalBox17 {
            left: 265px;
            top: 212px;
          }

          &.modalBox18 {
            left: 78px;
            top: -100px;
          }

          &.modalBox19 {
            left: 270px;
            top: 212px;
          }

          &.active {
            display: block;
          }

          h1 {
            margin-bottom: 12px;
            font-size: 18px;
          }
          div {
            margin-bottom: 12px;
            &:last-child {
              margin-bottom: 12px;
            }
          }
        }

        .gpsBox {
          width: 19px;
          height: 16px;
          margin-right: auto;
          margin-left: auto;
        }
        .blackGps {
          position: absolute;
          margin-left: 50px;
          &.blackGps1 {
            z-index: 2;
            left: 407px;
            bottom: 98px;
          }
          &.blackGps2 {
            z-index: 1;
            left: 412px;
            bottom: 105px;
          }
          &.blackGps3 {
            z-index: 1;
            left: 415px;
            bottom: 97px;
          }
          &.blackGps4 {
            z-index: 2;
            left: 372px;
            bottom: 233px;
          }
          &.blackGps5 {
            z-index: 2;
            left: 401px;
            bottom: 233px;
          }
          &.blackGps6 {
            z-index: 2;
            left: 402px;
            bottom: 213px;
          }
          &.blackGps7 {
            z-index: 1;
            left: 413px;
            bottom: 90px;
          }
          &.blackGps8 {
            z-index: 2;
            left: 415px;
            bottom: 233px;
          }
          &.blackGps9 {
            z-index: 1;
            left: 399px;
            bottom: 98px;
          }

          &.blackGps10 {
            /*display: none;*/
            z-index: 1;
            left: 364px;
            bottom: 235px;
          }

          &.blackGps11 {
            z-index: 1;
            left: 393px;
            bottom: 231px;
          }
          &.blackGps12 {
            z-index: 1;
            left: 409px;
            bottom: 238px;
          }
          &.blackGps13 {
            z-index: 1;
            left: 394px;
            bottom: 214px;
          }
          &.blackGps14 {
            display: block;
            z-index: 2;
            left: 403px;
            bottom: 199px;
          }

          &.blackGps15 {
            z-index: 1;
            left: 395px;
            bottom: 197px;
          }

          &.blackGps16 {
            z-index: 2;
            /*display: none;*/
            left: 277px;
            bottom: 325px;
          }

          &.blackGps17 {
            z-index: 2;
            /*display: none;*/
            left: 404px;
            bottom: 153px;
          }

          &.blackGps18 {
            z-index: 1;
            /*display: none;*/
            left: 285px;
            bottom: 325px
          }

          &.blackGps19 {
            z-index: 1;
            /*display: none;*/
            left: 412px;
            bottom: 154px;
          }
        }

        .area {
          position: absolute;
          font-size: 12px;
          transform: scale(0.8);
          color: #94e0fc;//#6cffdb;
          &.one1 {
            left: 392px;
            bottom: 137px;
          }

          &.two1 {
            left: 339px;
            bottom: 244px;
          }

          &.three1 {
            left: 455px;
            bottom: 261px;
          }
          &.four1 {
            left: 355px;
            bottom: 345px;
          }
          &.five1 {
            left: 450px;
            bottom: 330px;
          }
          &.six1 {
            left: 451px;
            bottom: 70px;
          }
        }

        #rolling {
          height: 220px;
          overflow: hidden;
          position: absolute;
          right: 0;
          margin-right: 10px;
          bottom: 0px;
          .black_info {
            .node {
              img {
                margin-top: 11px;
              }
              span {
                display: inline-block;
                margin-left: 5px;
                letter-spacing: 1px;
                font-size: 13px;
              }
              box-sizing: border-box;
              width: 228px;
              height: 40px;
              padding: 0 10px;
              line-height: 44px;
              font-size: 14px;
              color: #ffffff;
              background: url("../../assets/img/bigScreenNew/map/info.png") no-repeat;
              background-size: cover;
              margin-bottom: 5px;
              &:last-child {
                margin-bottom: 0;
              }
            }
          }
        }

      }
    }
  }

  .gpsAddress {
    margin-left: auto;
    margin-right: auto;
    width: 19px;
  }


</style>
